<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Content-Security-Policy"
    content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline';">
  <title>信号选择</title>
  <style>
    html,
    body {
      height: 100%;
      font-family: Arial, sans-serif;
      padding: 10px;
      display: flex;
      flex-direction: column;
      margin: 0;
      box-sizing: border-box;
    }


    #my_popup_title {
      height: 40px;
    }

    .my_popup_container {
      flex-grow: 1;
      display: flex;
      gap: 10px;
      flex-direction: column;
      /* background-color: yellow; */
    }

    #my_popup_list {
      padding: 10px 0;
      flex-grow: 1;
      display: grid;
      /* grid-template-columns: repeat(8, 1fr); */
      grid-template-columns: repeat(auto-fit, 40px);
      /* 子元素宽度为 100px，自动排列 */
      gap: 10px;
      justify-items: center;
      /* 水平居中 */
      align-items: center;
      /* 垂直居中 */
      /* 整个网格在父容器中居中 */
    }

    .my_sign_index {
      align-items: left;
      width: 100%;
    }

    .my_popup_button {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      /* background-color: green; */
    }

    button {
      padding: 5px 10px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    button:hover {
      background-color: #0056b3;
    }
  </style>
</head>

<body>
  <div id="my_popup_title">数字信号选择</div>
  <div class="my_popup_container">
    <div id="my_popup_list">
      <template id="my_checkbox_temp">
        <label class="my_sign_index"><input type="checkbox" class="my_sign">0</label>
      </template>
    </div>
    <div class="my_popup_button">
      <button id="all_select_button">全选</button>
      <button id="all_unselect_button">全不选</button>
      <button id="enter_button">确定</button>
      <button id="close-button">取消</button>
    </div>
  </div>
</body>

<script>

  // 全选
  document.getElementById('all_select_button').addEventListener('click', () => {
    all_checkBox(true);
  });

  //全不选
  document.getElementById('all_unselect_button').addEventListener('click', () => {
    all_checkBox(false);
  });

  //确定 
  document.getElementById('enter_button').addEventListener('click', () => {
    current_ch.signalSelect = check_list.map(($0) => `${$0}`).join(',');
    MyAPI.sendSignalSelect(current_ch);
    MyAPI.closePopupWindow();
  });

  //取消弹窗
  document.getElementById('close-button').addEventListener('click', () => {
    MyAPI.closePopupWindow();
  });

  ///实现全选/全不选的方法
  function all_checkBox(select) {
    // 获取所有 checkbox 元素
    const checkboxes = document.querySelectorAll('#my_popup_list input[type="checkbox"]');
    checkboxes.forEach((checkbox, index) => {
      check_list[index] = select ? '1' : '0';
      checkbox.checked = select;
    });
  }
  const container = document.getElementById('my_popup_list');
  const item = document.getElementById('my_checkbox_temp');

  ///加载信号
  function loadSign() {
    // 清空容器
    container.innerHTML = '';
    // 循环生成多个通道项
    for (let i = 0; i < check_list.length; i++) {
      // 克隆模板
      const clone = document.importNode(item.content, true);

      const checkboxId = `my_sign${i}`;

      // 设置动态 ID
      const checkbox = clone.querySelector('.my_sign');
      checkbox.checked = check_list[i] === '1';
      checkbox.setAttribute('id', checkboxId);
      checkbox.addEventListener('change', function () {
        check_list[i] = checkbox.checked ? '1' : '0';
      });

      // 获取克隆的元素
      const lbl = clone.querySelector('.my_sign_index')
      lbl.textContent = i;
      lbl.setAttribute('for', checkboxId);
      lbl.setAttribute('id', `my_sign_index${i}`); // 设置 id 属性
      // 将 checkbox 重新插入到 label 的开头
      lbl.insertBefore(checkbox, lbl.firstChild);
      // 将克隆的元素添加到容器中
      container.appendChild(clone);
    }
  }

  ///监听传过来的数据
  let current_ch = null;
  let check_list = [];
  MyAPI.onDisplayFile((event, ch) => {
    current_ch = ch;
    check_list = ch.signalSelect.split(',');
    loadSign()
  });

</script>

</html>